import {Draggable} from '../models/drag-drop.js'
import Component from './base-component.js'
import {Autobind} from "../decorators/autobind.js";
import {Project} from "../models/project.js";


//ProjectItem Class
export class ProjectItem extends Component<HTMLUListElement, HTMLLIElement> implements Draggable {
    private project: Project;

    get persons() {
        if (this.project.people === 1) {
            return '1 person '
        } else {
            return `
            ${this.project.people} persons
            
            `
        }
    }


    constructor(hostId: string, project: Project) {
        super('single-project', hostId, false, project.id)
        this.project = project

        this.configure()
        this.renderContent()
    }

    @Autobind
    dragStartHandler(event: DragEvent) {
        console.log(event)
        event.dataTransfer!.setData('text/plain', this.project.id);
        event.dataTransfer!.effectAllowed = 'move'


    }

    @Autobind
    dragEndHandler(_: DragEvent) {
        console.log('DragEnd')

    }

    configure() {
        this.element.addEventListener('dragstart', this.dragStartHandler)
        this.element.addEventListener('dragend', this.dragEndHandler)
    }

    renderContent() {
        console.log('this')
        console.log(this)
        console.log('this.element')
        console.log(this.element)
        this.element.querySelector('h2')!.textContent = this.project.title;
        this.element.querySelector('h3')!.textContent = this.persons + 'assigned'
        this.element.querySelector('p')!.textContent = this.project.description;

    }
}

